<template>
  <div class="infoConfig">
    <el-form :v-model="form" label-width="110px" label-position="left">
      <el-row>
        <el-col :span="12">
          <el-form-item label="业务单号"> {{ baseData.ordId }} </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="租户">
            <div>{{ `${baseData.tenantName}(${ baseData.tenantId })` }}</div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="订单金额"> ￥{{ baseData.ordAmt }} </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="折扣"> {{ baseData.discount }}折 </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="可获流量余额"> {{ baseData.flowBalance }} </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="收款公户">
            <div>{{ `${baseData.accountBankName}(${baseData.accountBranchBank})` }}</div>
            <div>{{ baseData.accountNo }}</div>
            <div>{{ baseData.accountName }}</div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="状态"> {{ baseData.ordStatusZh }} </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="更新时间"> {{ baseData.updateTime }} </el-form-item>
        </el-col>
        <el-col v-if="baseData.ordStatus == 'F'" :span="12">
          <el-form-item label="原因">
            <span>{{ baseData.remark }}</span>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
    <el-form :v-model="form" label-width="150px" label-position="top">
      <el-row>
        <el-col :span="24">
          <el-form-item :label="`打款凭证(${baseData.imgList.length}张)`">
            <viewer :images="baseData.imgList">
              <img
                v-for="(item,idx) in baseData.imgList"
                :key="'img'+idx"
                class="avue-upload__avatar"
                :src="item"
              >
            </viewer>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item v-if="pageType == 'edit'" label="拒绝理由">
            <el-input

              v-model="baseData.remark"
              type="textarea"
              placeholder="请输入拒绝理由"
              maxlength="30"
              show-word-limit
            />
          </el-form-item>
        </el-col>
      </el-row>
      <div v-if="pageType == 'edit'" class="btnList textCenter">
        <el-button type="primary" size="small" @click="resolve">审核通过</el-button>
        <el-button type="danger" size="small" @click="reject">审核拒绝</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { tenantFlowAudit } from '@/api/flowConf'
export default {
  props: {
    infoConfig: {}
  },
  data() {
    return {
      form: {
        name: 123, img: '../../../../static/img-default/user.png'
      }
    }
  },
  computed: {
    baseData() { return this.infoConfig.data },
    pageType() { return this.infoConfig.type }
  },
  methods: {
    resolve() {
      this.$confirm(`是否确定审核通过？请务必确认已收到对应款项，审核通过后系统将自动给租户：${this.baseData.tenantName} 下发${this.baseData.flowBalance}流量`, '提示').then(_ => {
        tenantFlowAudit({
          ordStatus: 'S',
          ordId: this.baseData.ordId
        }).then(res => {
          console.log('res', res)
          this.$message.success('操作成功')
          this.$emit('sucClose')
        })
      })
    },
    reject() {
      if (!this.baseData.remark) {
        this.$message.warning('请输入拒绝理由')
      } else {
        this.$confirm('是否确定拒绝？', '提示').then(_ => {
          tenantFlowAudit({
            ordStatus: 'F',
            remark: this.baseData.remark,
            ordId: this.baseData.ordId
          }).then(res => {
            console.log('res', res)
            this.$message.success('操作成功')
            this.$emit('sucClose')
          })
        })
      }
    },
    addLine(type) {
      switch (type) {
        case 'merc':
          this.mercList.push({ name: '一级代理', a: 123, b: 123 })
          break
        default:
          break
      }
    }
  }

}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.avue-upload__avatar{
  width: 100px;
  margin-right: 10px;
}
.infoConfig{
  padding: 30px;
  .title{
    font-size: 15px;
    color: #000;
    margin: 30px 0;
  }
  .numInput{
    width: 100px;
    margin: 0 10px;
  }
  .listItem{
    border: 1px solid rgba(255, 183, 47, 1);
    border-radius: 10px;
    padding: 10px;
    margin: 10px 0;
    .content{
      display: flex;
      align-items: center;
      div{
        flex: 1;
      }
    }
  }
}
</style>
